import {Link} from "react-router-dom";
import './Architect.css';
import './Responsive.css';
import Test1 from '../../../assets/1.svg'
import Test2 from '../../../assets/2.svg'
import Test3 from '../../../assets/3.svg'
import Test4 from '../../../assets/4.svg'
import Test5 from '../../../assets/5.svg'
import Test6 from '../../../assets/game.svg'
const Navbar = () => {

    const navbarIcon = [Test1, Test2, Test3, Test4, Test5];

    return (
        <div className='navbar'>
            <div className='navbar-left'>
                <Link to="/list" className="home-link">
                    <img src={Test1} alt="Article" className="home-icon" />
                    <span className="home-span">枫湖</span>
                </Link>
            </div>

            <div className='navbar-right'>
                <div className='navbar-search'>
                    <input className="navbar-search-input" placeholder="搜索中..." />
                    <img src={Test6} alt="Article" className="navbar-search-icon" />
                </div>
                <div className="navbar-link-container">
                    {navbarIcon.map((icon, index) => (
                        <Link to="/home-page" className="navbar-link" key={index}>
                            <img src={icon} alt={`Article ${index + 1}`} className="navbar-icon" />
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    );

};

export default Navbar;
